(function () {
	BasicGrid = {
		myData : null,
		store : null,
		defineModel : function(){
			// Define Company entity
			// Null out built in convert functions for performance *because the raw data is known to be valid*
			// Specifying defaultValue as undefined will also save code. *As long as there will always be values in the data, or the app tolerates undefined field values*
			Ext.define('Company', {
				extend : 'Ext.data.Model',
				fields : [{
						name : 'company'
					}, {
						name : 'price',
						type : 'float',
						convert : null,
						defaultValue : undefined
					}, {
						name : 'change',
						type : 'float',
						convert : null,
						defaultValue : undefined
					}, {
						name : 'pctChange',
						type : 'float',
						convert : null,
						defaultValue : undefined
					}, {
						name : 'lastChange',
						type : 'date',
						dateFormat : 'n/j h:ia',
						defaultValue : undefined
					}
				],
				idProperty : 'company'
			});
		},
		initData : function(){
			Ext.QuickTips.init();
		
			// setup the state provider, all state information will be saved to a cookie
			Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
		
			// sample static data for the store
			BasicGrid.myData = [
				['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
				['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
				['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
				['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
				['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
				['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
				['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
				['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
				['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
				['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
				['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
				['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
				['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
				['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
				['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
				['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
				['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
				['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
				['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
				['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
				['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
				['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
				['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
				['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
				['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
				['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
				['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
				['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
				['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
			];
		},
		createStore : function(){
			BasicGrid.store = new Ext.data.ArrayStore ({
				model : 'Company',
				data : BasicGrid.myData
			});
		},
		createGrid : function(){
			return new Ext.grid.Panel ({
					store : BasicGrid.store,
					stateful : true,
					collapsible : false,
					multiSelect : false,
					stateId : 'stateGrid',
					columns : [{
							text : 'Company',
							flex : 1,
							sortable : false,
							dataIndex : 'company'
						}, {
							text : 'Price',
							width : 75,
							sortable : true,
							renderer : 'usMoney',
							dataIndex : 'price'
						}, {
							text : 'Change',
							width : 75,
							sortable : true,
							renderer : BasicGrid.onChange,
							dataIndex : 'change'
						}, {
							text : '% Change',
							width : 75,
							sortable : true,
							renderer : BasicGrid.onPctChange,
							dataIndex : 'pctChange'
						}, {
							text : 'Last Updated',
							width : 85,
							sortable : true,
							renderer : Ext.util.Format.dateRenderer('m/d/Y'),
							dataIndex : 'lastChange'
						}, {
							menuDisabled : true,
							sortable : false,
							xtype : 'actioncolumn',
							width : 50,
							items : [{
									icon : 'http://bbsproject.googlecode.com/svn/trunk/shared/icons/fam/delete.gif', // Use a URL in the icon config
									tooltip : 'Sell stock',
									handler : function (grid, rowIndex, colIndex) {
										var rec = store.getAt(rowIndex);
										alert("Sell " + rec.get('company'));
									}
								}, {
									getClass : function (v, meta, rec) { // Or return a class from a function
										if (rec.get('change') < 0) {
											this.items[1].tooltip = 'Hold stock';
											return 'alert-col';
										} else {
											this.items[1].tooltip = 'Buy stock';
											return 'buy-col';
										}
									},
									handler : function (grid, rowIndex, colIndex) {
										var rec = store.getAt(rowIndex);
										alert((rec.get('change') < 0 ? "Hold " : "Buy ") + rec.get('company'));
									}
								}
							]
						}
					],
				height : 230,
				width : 600,
				title : 'Array Grid',
				renderTo : 'grid-example',
				viewConfig : {
					stripeRows : true,
					enableTextSelection : false
				}
			});
		},
		/**
		 * Custom function used for column renderer
		 * @param {Object} val
		 */
		onChange : function change(val) {
			if (val > 0) {
				return '<span style="color:green;">' + val + '</span>';
			} else if (val < 0) {
				return '<span style="color:red;">' + val + '</span>';
			}
			return val;
		},
		/**
		 * Custom function used for column renderer
		 * @param {Object} val
		 */
		onPctChange : function pctChange(val) {
			if (val > 0) {
				return '<span style="color:green;">' + val + '%</span>';
			} else if (val < 0) {
				return '<span style="color:red;">' + val + '%</span>';
			}
			return val;
		}
	}
})();
